<script>
import gql from 'graphql-tag'
import { defineComponent, onMounted, ref, watch, computed } from 'vue'
import { useQuery } from '@vue/apollo-composable'
import MessageItem from './MessageItem.vue'
import MessageForm from './MessageForm.vue'

export default defineComponent({
  components: {
    MessageItem,
    MessageForm,
  },

  props: {
    id: {
      type: String,
      required: true,
    },
  },

  setup (props) {
    const { result, loading, refetch } = useQuery(gql`
      query channel ($id: ID!) {
        channel (id: $id) {
          ...channelView
        }
      }

      fragment channelView on Channel {
        id
        label
        messages {
          id
          text
        }
      }
    `, () => ({
      id: props.id,
    }), {
      notifyOnNetworkStatusChange: true,
    })
    const channel = computed(() => result.value?.channel)

    const messagesEl = ref()

    function scrollToBottom () {
      if (!messagesEl.value) return
      messagesEl.value.scrollTop = messagesEl.value.scrollHeight
    }

    watch(() => channel.value?.messages, () => {
      scrollToBottom()
    })

    onMounted(() => {
      scrollToBottom()
    })

    return {
      loading,
      refetch,
      channel,
      messagesEl,
    }
  },
})
</script>

<template>
  <div>
    <div
      v-if="loading"
      class="loading-channel fixed top-0 left-0 w-full flex"
    >
      <div class="px-4 py-2 rounded-b mx-auto bg-white border-b border-l border-r border-gray-200">
        Loading channel...
      </div>
    </div>

    <div
      v-if="channel"
      class="flex flex-col h-full"
    >
      <div class="flex-none p-6 border-b border-gray-200 bg-white">
        Currently viewing # {{ channel.label }}

        <a
          class="text-green-500 cursor-pointer"
          data-test-id="refetch"
          @click="refetch()"
        >Refetch</a>
      </div>

      <div
        ref="messagesEl"
        class="flex-1 overflow-y-auto"
      >
        <MessageItem
          v-for="message of channel.messages"
          :key="message.id"
          :message="message"
          class="m-2"
        />
      </div>

      <MessageForm
        :channel-id="channel.id"
        class="flex-none m-2 mt-0"
      />
    </div>
  </div>
</template>
